<template>
  <div id="#loading-wrap1" class="warp">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>车辆照片</span>
      </div>
      <div class="image-wrap">
        <div v-for="(item, index) in thirdConfig " :key="index">
          <ImageCard :label="item.label" :data="item.data" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import ImageCard from './ImageCard.vue'

export default {
  components: {
    ImageCard
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    },
    curItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loadingState: null,
      loading: false,
      form: {},
      form1: {},
      form2: {},
      activeName: 'first',
      statusOption: [{ label: '通过', value: 2 }, { label: '驳回', value: 0 }],
      images: [],
      firstConfig: [],
      thirdConfig: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo(this.id)
            this.openFullScreen2()
          }, 500)
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.activeName = 'first'
      this.images = []
      this.firstConfig = []
      this.thirdConfig = []
      this.$emit('handleClose')
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap1'
      })
      this.loadingState = loading
    },

    /** 审核身份 */
    onSubmitPerson(p, url) {
      const params = { ... p }
      this.loading = true
      request({ url: 'system/dataReview/' + url, params: params }).then(res => {
        this.$message({
          message: '审核成功',
          type: 'success'
        })
        this.$emit('add-success')
      }).finally(() => {
        this.loading = false
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    getInfo(id) {
      Promise.all([
        request({ url: 'system/carImage/' + id, method: 'get' })
      ]).then(([d3]) => {
        // 处理第三个
        if (d3.data) {
          const thirdConfig = [
            { value: '人车合影', key: 'personCarImage' }, { value: '里程表', key: 'odometer' }, { value: '车正面', key: 'carFront' }, { value: '车后面', key: 'carBehind' },
            { value: '左前45', key: 'left45' }, { value: '右后45', key: 'right45' }, { value: '发动机舱', key: 'engineCompartment' }, { value: '出厂铭牌', key: 'factoryNameplate' },
            { value: '中控内饰', key: 'centralControlInterior' }, { value: '其他', key: 'other' }
          ]
          const arr = []
          Object.entries(d3.data).forEach(([key, value]) => {
            const find = thirdConfig.find(it => it.key === key)
            if (find) {
              arr.push({
                label: find.value,
                data: value ? value.split(',') : []
              })
            }
          })
          this.thirdConfig = arr
        }
      }).finally(() => {
        this.loadingState?.close()
      })
    }
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: rgb(246, 247, 250);
}

.image-wrap {
  width: 90%;
  /* border:  1px solid black; */
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.warp {
  min-height: 200px;
  /* background-color: red; */
}
</style>
